<template>
	<div class="select-question-container">
		<div class="container-main" v-show="type == 1">
			<div class="query-bar">
				<el-form ref="queryParams" :model="queryParams" :inline="true" class="query-bar" label-width="90px">
					<el-form-item label="所属知识点">
						<el-select multiple v-model="queryParams.kwptIds" filterable placeholder="请选择" @change="doQuery" collapse-tags>
							<el-option v-for="kwpt in kwptList" :key="kwpt.id" :label="kwpt.kwptName" :value="kwpt.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="所属标签">
						<el-select multiple v-model="queryParams.tagIds" filterable placeholder="请选择" @change="doQuery" collapse-tags>
							<el-option v-for="tag in tagsList" :key="tag.id" :label="tag.name" :value="tag.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="所属章节">
						<multiple-tree-select :dataList="chapterList" label="chapterName" childrenName="subChapters" :initValue="selectChapterIdList"
						 @checkCheck="chapterChange" :width="200" :inputMaxNum="3"></multiple-tree-select>
					</el-form-item>
				<!-- 	<el-form-item label="面试题分类" v-if="category == 2">
						<el-select v-model="queryParams.classify" filterable placeholder="请选择" @change="doQuery">
							<el-option label="全部" value=""></el-option>
							<el-option v-for="classify in classifyList" :key="classify.id" :label="classify.name" :value="classify.id"></el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item label="题目类型" v-if="category == 1">
						<el-select v-model="queryParams.type" filterable placeholder="请选择" @change="doQuery">
							<el-option label="全部" value=""></el-option>
							<el-option v-for="type in typeList" :key="type.id" :label="type.name" :value="type.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="难易度">
						<el-select v-model="queryParams.complex" filterable placeholder="请选择" @change="doQuery">
							<el-option label="全部" value=""></el-option>
							<el-option v-for="(complex,index) in complexList" :key="index" :label="complex" :value="index+1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="关键词">
						<el-input maxlength="20" v-model="queryParams.searchWord" placeholder="请输入关键词" @input="doQuery"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="question-box">
				<div class="question-box-main">
					<div class="question-box-main-title" v-if="isShowSelectAll && !maxSelectQuestionNum">
						<el-checkbox :indeterminate="isIndeterminate" :disabled="!questionList || questionList.length == 0" :value="selectPageAll" @change="selectAll">全选</el-checkbox>
					</div>
					<div class="question-list">
						<template v-if="questionList && questionList.length > 0" >
							<div class="question-item-box"  v-for="(question,index) in questionList"  >
								<question  :qIndex="index" :question="question"   
									:showCheckBox="true" :key="'q'+index" @change="questionSelect" 	:checkBoxDisabled="calDisabled(question.id)" :isSelected="calSelected(question.id)" >
									<!-- 题目的底部 -->
									<question-footer slot="footer" :question="question" :canEditScore="false" :showOperate="false" ></question-footer> 
									<!-- 材料题子题底部 -->
									<question-footer slot="materialFooter"  slot-scope="sData" :question="sData.subQuestion" :canEditScore="false" :showOperate="false"></question-footer> 
								</question>
							</div>
						</template>
						<question v-else></question>
					</div>
					<el-pagination  background @current-change="currentChange"
					 :current-page="queryParams.currentPage"  :page-size="5" layout="total,prev, pager, next" :total="queryParams.total" small>
					</el-pagination>
				</div>
			</div>
		</div>
		<div class="container-main" v-show="type == 2">
			<div class="question-box">
				<div class="question-box-main">
					<div class="question-list">
						<template v-if="selectQuestions && selectQuestions.length > 0" >
							<div class="question-item-box"  v-for="(question,index) in selectQuestions"  >
								<question  :question="question"   :key="'sq'+index" :showMoveUp="index > 0" :qIndex="index" >
									<!-- 题目的底部 -->
									<question-footer slot="footer" :question="question" :canEditScore="question.questionType != 7"  :showMoveUp="index > 0" :showMoveDown="index < selectQuestions.length - 1"
										@moveUp="moveUp(index)" 	@moveDown="moveDown(index)" 	@delQuestion="delQuestion(index)"  @scoreChange="(val)=>{scoreChange(index,val)}">
									</question-footer> 
										
									<!-- 材料题子题底部 -->
									<question-footer slot="materialFooter"  slot-scope="sData" :question="sData.subQuestion"  :showMoveUp="sData.sIndex > 0" :showMoveDown="sData.sIndex < question.subQuestionList.length - 1"
										:showDel="false"
										@moveUp="moveSubUp(index,sData.sIndex)" 	@moveDown="moveSubDown(index,sData.sIndex)"   @scoreChange="(val)=>{scoreSubChange(index,sData.sIndex,val)}">
									</question-footer> 
								</question>
							</div>
						</template>
						<question v-else></question>
					</div>
				</div>
			</div>
		</div>
		<div class="container-footer">
			<div class="select-info">
				<div>已选 <span class="main-color-font">{{selectQuestionIds.length}}</span> 题</div>
				<a class="check-select-btn" @click="checkSelectedQuestion" v-show="type == 1">查看已选题目</a>
			</div>
			<div class="btn-box">
				<el-button type="infor" size="medium" @click="cancle">{{cancleBtnName}}</el-button>
				<el-button type="primary" size="medium" @click="confirm">确定</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import LxTable from "@/components/LxTable.vue";
	import MultipleTreeSelect from "@/components/MultipleTreeSelect.vue";
	import {mapActions} from "vuex";
	import {transQuestion,classifyList,classifyMap,typeList,complexList,getTotalScore} from "@/common/question.js";
	import QuestionItem from "@/components/question/Question.vue";
	import QuestionFooter from "@/components/question/components/QuestionFooter.vue";
	export default {
		components: {
			"lx-table": LxTable,
			"multiple-tree-select": MultipleTreeSelect,
			"question": QuestionItem,
			"question-footer":QuestionFooter
		},
		props: {
			category: {
				//考试类别
				type: Number,
				required: true
			},
			classify:{
				//面试题类别
				type:Number
			},
			majorId: {
				//类别id
				type: Number,
				required: true
			},
			subjectId: {
				//科目id
				type: Number,
				required: true
			},
			kwptList: {
				//知识点集合
				type: Array,
				required: true
			},
			tagsList: {
				//标签集合
				type: Array,
				required: true
			},
			chapterList: {
				//章节集合
				type: Array,
				required: true
			},
			initQuestionIds:{
				//默认选中的题目id
				type:Array,
				default:()=>[]
			},
			initQuestions:{
				//默认选中的题目
				type:Array,
				default:()=>[]
			},
			maxSelectNum:{
				//最大可选项
				type:Number
			},
			isShowSelectAll:{
				//是否显示全选
				type:Boolean,
				default:true
			},
			filters:{
				//过滤
				type:String,
				default:""
			}
		},
		mounted() {
			this.selectQuestionIds = this.initQuestionIds;
			this.selectQuestions = this.initQuestions;
			this.initWindow();
		},
		computed:{
			isIndeterminate(){
				if(!this.questionIdList || this.questionIdList.length == 0){
					return false;
				}
				if(!this.selectQuestionIds || this.selectQuestionIds.length == 0){
					return false;
				}
				let mList = Array.intersect(this.selectQuestionIds,this.questionIdList);
				return  mList && mList.length > 0 && ! Array.isContain(this.selectQuestionIds,this.questionIdList) ;
			},
			selectPageAll(){
				//当前页面是否全选
				return Array.isContain(this.selectQuestionIds,this.questionIdList) ;
			}
		},
		data() {
			return {
				type:1,//1是选择题目 2是预览
				cancleBtnName:"返回",
				typeList: typeList,
				classifyList: classifyList,
				classifyMap: classifyMap,
				complexList: complexList,
				selectChapterIdList: [],
				queryParams: {
					category: this.category,
					majorId: this.majorId,
					subjectId: this.subjectId,
					kwptIds: null,
					tagIds: null,
					searchWord: "",
					classify: this.classify,
					type: null,
					complex: null,
					chapterIds: null,
					startTime: "",
					endTime: "",
					isAdvance: false,
					currentPage: 1,
					numPerPage: 5,
					total: 0,
					qpName: "SelectQuestion",
					filters:this.filters
				},
				selectTime: [],
				oQuestionList:[],//当前页原始数据
				questionIdList:[],//当前页
				questionList: [],//当前页转换之后的数据
				selectQuestionIds: [],
				selectQuestions: [],
				maxSelectQuestionNum:null
			}
		},
		methods: {
			initWindow() {
				if(this.category == 2){
					this.queryParams.type = 4;
				}
				this.getQuestionList();
				this.maxSelectQuestionNum = this.maxSelectNum;
			},
			chapterChange(selectInfo) {
				this.selectChapterIdList = selectInfo.selectedKeys;
				if (selectInfo.selectedKeys.length > 0) {
					this.queryParams.chapterIds = selectInfo.selectedKeys.join();
				} else {
					this.queryParams.chapterIds = "";
				}

				this.queryParams.currentPage = 1;
				this.getQuestionList();
			},
			doQuery() {
				this.queryParams.currentPage = 1;
				this.getQuestionList();
			},
			currentChange(val) {
				this.queryParams.currentPage = val;
				this.getQuestionList();
			},
			async getQuestionList() {
				let p = JSON.parse(JSON.stringify(this.queryParams))
				if (p.kwptIds && p.kwptIds.length > 0) {
					p.kwptIds = p.kwptIds.join();
				}
				if (p.tagIds && p.tagIds.length > 0) {
					p.tagIds = p.tagIds.join();
				}
				let selectTime = this.selectTime;
				if (selectTime && selectTime.length > 0) {
					p.startTime = selectTime[0];
					p.endTime = selectTime[1];
				} else {
					p.startTime = "";
					p.endTime = "";
				}
				let ret = await this.$api.searchQuestions(p);
				if (ret) {
					let list = ret.data.list;
					this.oQuestionList = list;
					let transObj = transQuestion(list,this.queryParams.currentPage,5);
					this.questionList = transObj.dataList;
					this.questionIdList = transObj.idList;
					console.log(this.questionList)
					this.queryParams.total = ret.data.total;
				}
			},
			calSelected(id){
				//计算当题是否选中
				return this.selectQuestionIds && this.selectQuestionIds.indexOf(id) != -1;
			},
			calDisabled(id){
				//计算当题的复选框是否禁用 （当有最大可选值时，已选择的数量等于最大可选值 ，那么未选择的题目的复选框都被禁用）
				return this.maxSelectQuestionNum && this.maxSelectQuestionNum == this.selectQuestionIds.length && !this.calSelected(id)
			},
			questionSelect(isSelected,question){
				if(isSelected){
					let maxSelectQuestionNum = this.maxSelectQuestionNum;
					if(maxSelectQuestionNum && this.selectQuestionIds.length == maxSelectQuestionNum){
						this.$message.warning("已经选满"+maxSelectQuestionNum+"个");
						return;
					}
					this.selectQuestionIds.push(question.id);
					this.selectQuestions.push(question);
				}else{
					let index = this.selectQuestionIds.indexOf(question.id);
					this.selectQuestionIds.splice(index,1);
					this.selectQuestions.splice(index,1);
				}
			},
			selectAll(isSelect){
				//全选
				let questionIdList = this.questionIdList;
				let questionList = this.questionList;
				let selectQuestionIds = this.selectQuestionIds;
				let selectQuestions = this.selectQuestions;
				if(isSelect){
					for(let i = 0 ; i < questionIdList.length ; i++){
						if(!selectQuestionIds.includes(questionIdList[i])){
							selectQuestionIds.push(questionIdList[i]);
							selectQuestions.push(questionList[i]);
						}
					}
				}else{
					for(let i = 0 ; i < questionIdList.length ; i++){
						if(selectQuestionIds.includes(questionIdList[i])){
							let index = selectQuestionIds.indexOf(questionIdList[i]);
							selectQuestionIds.splice(index,1);
							selectQuestions.splice(index,1);
						}
					}
				}
				this.selectQuestionIds = selectQuestionIds;
				this.selectQuestions = selectQuestions;
			},
			checkSelectedQuestion(){
				if(!this.selectQuestionIds || this.selectQuestionIds.length == 0){
					this.$message.warning("还没有选择题目,请先选择题目");
					return;
				}
				this.type = 2;
				this.cancleBtnName = "继续选题";
			},
			scoreChange(index,val){
				
			},
			delQuestion(index){
				//删除题目
				this.selectQuestionIds.splice(index,1);
				this.selectQuestions.splice(index,1);
			},
			moveUp(index){
				if(index == 0){
					return;
				}
				let ques = this.selectQuestions;
				let quesIds = this.selectQuestionIds;
				let tempId = quesIds[index];
				let tempQ = ques[index];
				quesIds[index] = quesIds[index-1];
				// ques[index] = ques[index-1];
				this.$set(this.selectQuestions,index,ques[index-1]);
				quesIds[index-1] = tempId;
				// ques[index-1] = tempQ;
				this.$set(this.selectQuestions,index-1,tempQ);
			},
			moveDown(index){
				let ques = this.selectQuestions;
				if((!index && index != 0) || index == ques.length - 1){
					return;
				}
				let quesIds = this.selectQuestionIds;
				
				let tempId = quesIds[index];
				let tempQ = ques[index];
				quesIds[index] = quesIds[index+1];
				// ques[index] = ques[index+1];
				this.$set(this.selectQuestions,index,ques[index+1]);
				quesIds[index+1] = tempId;
				// ques[index+1] = tempQ;
				this.$set(this.selectQuestions,index+1,tempQ);
				
			},
			moveSubDown(index,jndex){
				let selectQuestionIds = this.selectQuestionIds;
				let selectQuestions = this.selectQuestions;
				let q = selectQuestions[index];
				let subQuestionList = q.subQuestionList;
				let tempQ = subQuestionList[jndex];
				subQuestionList[jndex] = subQuestionList[jndex+1];
				subQuestionList[jndex+1] = tempQ;
				selectQuestions[index] = q;
				this.$set(this.selectQuestions,index,q);
			},
			moveSubUp(index,jndex){
				let selectQuestions = this.selectQuestions;
				let q = selectQuestions[index];
				let subQuestionList = q.subQuestionList;
				let tempQ = subQuestionList[jndex];
				subQuestionList[jndex] = subQuestionList[jndex-1];
				subQuestionList[jndex-1] = tempQ;
				this.$set(this.selectQuestions,index,q);
			},
			delSubQuestion(index,jndex){
				let selectQuestions = this.selectQuestions;
				let q = selectQuestions[index];
				let dScore = q.subQuestionList[jndex].score;
				q.score = q.score - dScore;
				q.subQuestionList.splice(jndex,1);
				this.$set(this.selectQuestions,index,q);
			},
			scoreSubChange(index,jndex,score){
				let selectQuestionIds = this.selectQuestionIds;
				let selectQuestions = this.selectQuestions;
				let q = selectQuestions[index];
				let subQuestionList = q.subQuestionList;
				// let oScore = subQuestionList[jndex].score;
				q.score = getTotalScore(subQuestionList);
				this.$set(this.selectQuestions,index,q);
			},
			cancle(){
				if(this.type == 2){
					this.type = 1;
					this.cancleBtnName = "返回";
					return;
				}
				this.$emit("cancle");
			},
			confirm(){
				this.$emit("confirm",this.selectQuestionIds,this.selectQuestions);
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.select-question-container {
		width: 100%;
		// padding: 32px 24px;
		@include flex-column(flex-start, flex-start);

		.container-main {
			width: 100%;
			height: 500px;
			@include flex-row(center, flex-start);

			.query-bar {
				width: 300px;
				height: 100%;
				@include flex-column(center, center);

				.el-select,
				.multiple-select,
				.el-input {
					width: 200px;
				}
			}

			.question-box {
				width: 0;
				flex: 1;
				min-height: 300px;
				height: 100%;

				.question-box-main {
					width: 100%;
					height: 480px;
					border: 1px solid #EBEEF6;
					padding: 12px 12px 0 12px;
					box-sizing: border-box;
					@include flex-column(flex-start, center);
					
					.question-box-main-title {
						width: 100%;
						height: 20px;
						@include flex-row(flex-start, center);
					}

					.question-list {
						width: 100%;
						height: 420px;
						overflow-y: auto;
						padding-right: 2px;
						box-sizing: border-box;
						padding-bottom: 8px;
						@include flex-column(flex-start, flex-start);

						.question-item-box{
							width: 100%;
							@include flex-row(flex-start, flex-start);
						}
					}
					
					::-webkit-scrollbar {
						/*滚动条整体样式*/
						width: 4px;
						/*高宽分别对应横竖滚动条的尺寸*/
						height: 1px;
					}
					
					::-webkit-scrollbar-thumb {
						/*滚动条里面小方块*/
						border-radius: 4px;
							background: #4F70F0;
					}
					
					::-webkit-scrollbar-track {
						/*滚动条里面轨道*/
						box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
						border-radius: 4px;
						background: #FBFBFB;
					}
					
					.el-pagination{
						margin-top: 8px;
						margin-bottom: 8px;
					}
				}
			}
		}

		.container-footer {
			width: 100%;
			height: 60px;
			box-sizing: border-box;
			padding: 0 24px;
			border-top: 1px solid #D5DAE0;
			@include flex-row(space-between, center);

			.select-info {
				@include flex-row(flex-start, center);

				.check-select-btn {
					color: #808080;
					text-decoration: underline;
					margin-left: 16px;
					cursor: pointer;
				}

				.check-select-btn:hover {
					color: $mainColor;
				}

				.btn-box {
					@include flex-row(space-between, center);
				}
			}
		}
	}
	::v-deep .question-item{
		background-color: #FBFBFB;
	}
</style>
